<template>
  <div class="bg-white p-4 border-rounded-xl">
    <div class="mb-2"><h3 class="font-bold text-xl">商品精选</h3></div>
    <div class="flex flex-wrap justify-start pb-5">
      <div v-for="product in products" class="w-1/6">
        <ProductCard :item="product" :key="product?.id" :product="product" :showSaleNum="true" :showOper="false" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import ProductCard from "./ProductCard.vue";
import { generateProducts } from "@/mock/data/product";

const products = ref<any[]>([]);
onMounted(() => {
  products.value = generateProducts(6);
});
</script>
